<template>
<div class="shangpin">
    <div class="spxx" v-for="item in spSj" :key="item.gid" @click="urlfn(item.gid)">
            <div class="spxx-tu">
                <img :src="item.image">
            </div>
            <div class="spxx-zi">
                <div class="zia">
                    <p class="zia-p">{{item.title}}</p>
                </div>
                <div class="jiage">
                    <div class="jiage-a">
                        <span class="jiage-span2">￥</span>
                        <span class="jiage-span1">{{item.price}}</span>
                    </div>
                    <div class="jiage-b">
                        <img src="https://kaola-haitao.oss.kaolacdn.com/687b40ec-1d6c-4ca5-b8dd-a1983f9cbdfd.png" alt="">
                    <div class="jiage-c">
                            <span>￥</span>
                            <span>{{item.sales}}</span>
                    </div>
                    </div>
                </div>
            </div>
    </div>
</div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    data () {
        return {
        }
    },
    mounted () {
        // console.log(mapState);
    },
    computed: {
        ...mapState(['spSj'])
    },
    methods: {
        urlfn(gid){
        this.$router.push({name: "datail" , params:{ gid }})
        }
    },
}
</script>

<style lang="scss" scoped>
.shangpin{
    margin-bottom: 50px;
    display: flex;
    padding: 10px;
    background-color: #f2f2f2;
    flex-wrap: wrap;
    .spxx{
        width: 186px;
        height: 270px;
        background-color: #fff !important; 
        margin-right: 6px;
        margin-left: 5px;
        overflow: hidden;
        margin-bottom: 8px;
        .spxx-tu{
            width: 100%;
            height: 180px;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .spxx-zi{
            .zia{
                height: 36px;
                display: flex;
                align-items: center;
                font-size: 13px;
                width: 172px;
                .zia-p{
                        overflow: hidden;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                }
            }
            .jiage{
                display: flex;
                flex-direction: column;
                margin-left: 5px;
                .jiage-a{
                    .jiage-span1{
                        font-size: 20px;
                        font-weight:bold;
                        color: red;
                    }
                    .jiage-span1{
                        font-weight:bold;
                        color: red;
                    }
                }
                .jiage-b{
                        height: 18px;
                        color: #151515;
                        flex-direction: column;
                        img{
                            width: 43px;
                            height: 17px;
                            margin-top: 5px;
                            float: left;
                        }
                        .jiage-c{
                            align-items: baseline;
                            display: flex;
                            height: 19px;
                            width: 36px;
                            align-items: baseline;
                            margin-top: 3px;
                            background-image: linear-gradient(90deg,#ffe7c5 0%,#ffdeb0 100%);
                            span{
                                font-weight: bold;
                                font-size: 15px;
                            }
                        }
                }
            }
        }
    }
}
</style>
